<script setup lang='ts'>
import { ref } from "vue"
defineOptions({
  name: 'someDetail'
})
const props = defineProps({
  detailData: {
    type: Array as any,
    default: () => []
  },
  labelWidth: {
    type: Number,
    default: 120
  }
})
const dialogBasic = ref({
  title: "详情展示",
  visible: false,
  width: 600,
  height: 300,
  showFooter: false,
  marginTop: "10vh",
})

//显示弹框
const show = (type: string, row?: any) => {
  dialogBasic.value.visible = true
}
const onClose = () => {
  dialogBasic.value.visible = false
}
const onConfirm = () => {
  dialogBasic.value.visible = false
}
defineExpose({
  show,
  dialogBasic
})
</script>

<template>
  <!-- 
   :margin-top="dialogBasic.marginTop" -->
  <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
    :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" 
    @on-close="onClose" @on-confirm="onConfirm">
    <template v-slot:content>
      <el-form ref="ruleFormRef" :label-width="labelWidth + 'px'" class="demo-ruleForm" status-icon>
        <template v-for="item in detailData" :key="item.prop">
          <el-form-item :label="item.name">
            <el-input v-model="item.value" disabled></el-input>
          </el-form-item>
        </template>

      </el-form>
    </template>
  </SysDialog>
</template>

<style lang='scss' scoped>
.demo-ruleForm{
  max-height: 600px;
  overflow: auto;
}
</style>
